<pane-toolbar>
    <span class="text-semibold">Secrets</span>

    <div au-slot="right-end">
        <i class="icon-button add-icon"
           click.trigger="startNewSecret()"
           title="New Secret"></i>
        <i class="icon-button refresh-icon"
           click.trigger="refresh()"
           title="Refresh"></i>
    </div>
</pane-toolbar>

<div class="flex-fill overflow-auto d-flex flex-column">
    <table class="table sticky-header" if.bind="secrets.length > 0 || newSecret">
        <thead>
        <tr>
            <th title="The unique key (name) of the secret.">Key</th>
            <th>Value</th>
            <th title="When the value was last updated (local time).">Last Updated</th>
            <th class="text-center"><i class="actions-icon"></i></th>
        </tr>
        </thead>
        <tbody class="table-group-divider">
        <tr as-element="row"
            repeat.for="secret of secrets">
            <td class="text-semibold uncolored-icons">
                <div class="d-flex align-items-center">
                    <code class="fw-bold">${secret.key | truncate:100}</code>
                    <i class="copy-icon icon-button"
                       tooltip="Copy the key to your clipboard."
                       click.trigger="copyKeyToClipboard(secret)"></i>
                </div>
            </td>
            <td class="text-break d-flex align-items-center uncolored-icons">
                <div if.bind="secret.key !== secretInEdit?.key"
                     class="d-flex align-items-center">
                    <div class="d-grid" style="min-width: 50px">
                        <span class="text-truncate">${secret.shortValue}</span>
                    </div>
                    <i class="copy-icon icon-button"
                       tooltip="Copy unprotected value to your clipboard."
                       click.trigger="copyUnprotectedValueToClipboard(secret)"></i>
                    <i class="secrets-manager-icon icon-button"
                       tooltip="Show/edit unprotected value."
                       click.trigger="selectForEdit(secret)"></i>
                </div>
                <div else class="d-flex align-items-center flex-grow-1">
                    <textarea class="form-control"
                              rows="3"
                              spellcheck="false"
                              value.bind="secretInEdit.value"
                              style="min-width: 100px"></textarea>
                    <i class="check-icon icon-button opacity-100"
                       tooltip="Save"
                       click.trigger="finishEdit()"></i>
                    <i class="fa-solid fa-cancel icon-button opacity-100"
                       tooltip="Cancel"
                       click.trigger="resetEdits()"></i>
                </div>
            </td>
            <td class="text-truncate">${secret.updatedAtUtc | dateTime}</td>
            <td class="text-center">
                <i class="delete-icon icon-button" title="Delete this entry."
                   click.trigger="deleteSecret(secret)"></i>
            </td>
        </tr>
        <tr as-element="row" show.bind="newSecret">
            <td>
                <input type="text" class="form-control" placeholder="Secret name" value.bind="newSecret.key"/>
            </td>
            <td>
                <div class="d-flex align-items-center flex-grow-1">
                    <textarea class="form-control"
                              rows="3"
                              spellcheck="false"
                              placeholder="Secret value"
                              value.bind="newSecret.value"></textarea>
                    <i class="check-icon icon-button opacity-100"
                       tooltip="Save"
                       click.trigger="finishEdit()"></i>
                    <i class="fa-solid fa-cancel icon-button opacity-100"
                       tooltip="Cancel"
                       click.trigger="resetEdits()"></i>
                </div>
            </td>
            <td></td>
            <td></td>
        </tr>
        </tbody>
    </table>
    <div class="d-flex align-items-center justify-content-center flex-grow-1" else>
        <a class="btn-link me-1" click.trigger="startNewSecret()">Add</a> a new secret to start.
    </div>
</div>
